<!-- 参数收起组件，弹窗 + 表格 + json数据展示 -->

<template>
  <div style="width: 100%" @click="openDialogTable">
    <el-input
      v-model="modelValue"
      v-bind="mergeInputProps"
      clearable
      readonly
      :disabled="disabled"
    >
      <template #suffix>
        <el-icon
          @click.stop="handleClear"
          v-if="modelValue"
          style="cursor: pointer"
          ><CircleCloseFilled
        /></el-icon>
        <el-icon v-else><ArrowDown /></el-icon>
      </template>
    </el-input>
    <basic-dialog
      :title="mergeComProps.title"
      v-model="visible"
      :width="mergeComProps.width"
      :autoClose="false"
      @submit="handleSubmit"
    >
      <div style="display: flex">
        <avue-crud
          style="flex: 1"
          v-bind="mergeCrudProps"
          :data="tableData"
          @row-save="handleSave"
          @row-update="handleEdit"
          @row-del="handleDel"
        ></avue-crud>
      </div>
    </basic-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { merge } from 'lodash'
import { ref, watch } from 'vue'
const that = getCurrentInstance()
const props = defineProps({
  // 输入框参数
  inputProps: {
    type: Object,
    disabled: false,
    default: () => ({}),
  },
  // crud组件参数
  crudProps: {
    type: Object,
    default: () => ({}),
  },
  // 本组件参数
  comProps: {
    type: Object,
    default: () => ({}),
  },
  disabled: Boolean,
  label: String,
})
const modelValue = defineModel()
const defaultCrudProps = {
  option: {
    height: '40vh',
    searchSpan: 8,
    selection: false,
    menuWidth: '200px',
    column: [
      {
        label: '展示文本',
        prop: 'label',
        editDisabled: true,
        width: 200,
        sortable: true,
        rules: [
          { required: true, message: '参数名称不能为空', trigger: 'blur' },
        ],
      },
      {
        label: '保存值',
        prop: 'value',
        sortable: true,
        rules: [
          { required: true, message: '参数的值不能为空', trigger: 'blur' },
        ],
      },
      {
        label: '描述',
        prop: 'desc',
        sortable: true,
        span: 24,
        type: 'textarea',
      },
    ],
  },
}
const defaultInputProps = {
  placeholder: (!props.boxType ? '请输入 ' : '请选择 ') + props.label,
}
const defaultComProps = {
  showField: 'params',
  title: '参数收集',
  width: '1000',
  maxLength: undefined,
}
// 合并默认值与props值
const mergeCrudProps = computed(() =>
  merge({}, defaultCrudProps, props.crudProps)
)
const mergeInputProps = computed(() =>
  merge({}, defaultInputProps, props.inputProps)
)
const mergeComProps = computed(() => merge({}, defaultComProps, props.comProps))

const visible = ref(false)
// 表单数据
const tableData = ref([])
const openDialogTable = () => {
  visible.value = true
  if (modelValue.value) {
    tableData.value = JSON.parse(modelValue.value)
  } else {
    tableData.value = []
  }
}

const handleSave = (row, done, loading) => {
  if (
    typeof mergeComProps.value.maxLength === 'number' &&
    tableData.value.length === mergeComProps.value.maxLength
  ) {
    ElMessage.error('数据最大长度为' + mergeComProps.value.maxLength)
    done()
    loading()
    return
  }
  tableData.value.push(row)
  done()
  loading()
}
const handleEdit = (row, index, done, loading) => {
  tableData.value.splice(index, 1, row)
  done()
  loading()
}

const handleDel = (row, index) => {
  tableData.value.splice(index, 1)
}

const handleSubmit = () => {
  if (tableData.value.length > 0) {
    modelValue.value = JSON.stringify(tableData.value)
  } else {
    modelValue.value = ''
  }
  visible.value = false
}

const handleClear = () => {
  tableData.value = []
  modelValue.value = ''
}
</script>

<style lang="scss" scoped></style>
